<template>
  <div id="milestone" class="milestone">
    <img id="left-corner" src="../../assets/images/milestone-left-corner.png">
    <img id="right-corner" src="../../assets/images/milestone-left-corner.png">
    <span class="milestone-title trapezoid-title">里程碑节点</span>
    <div class="milestone-nodes-pointer">
      <img :src="imgPointer" class="milestone-pointer" :style="{transform:rotateCss}"alt="">
      <div id="milestone-echart-instance" />
    </div>
    <div class="milestone-text">
      <slider ref="slider" :options="options">
        <slideritem v-for="(item,index) in milestoneTextArr" :key="index">{{ item }}</slideritem>
        <div slot="loading">loading...</div>
      </slider>
    </div>
    <div class="swiper-btns">
      <svg-icon class="svgClass" icon-class="up-arrows" @click="upChangeTxt" />
      <svg-icon class="svgClass" icon-class="down-arrows" @click="downChangeTxt" />
    </div>
  </div>
</template>

<script>
import echarts from 'echarts/lib/echarts'
import 'echarts-liquidfill'
import { slider, slideritem } from 'vue-concise-slider'
import { debounce } from 'lodash'

export default {
  name: 'MilestoneNodes',
  components: {
    slider,
    slideritem
  },
  data() {
    return {
      imgPointer: require('@/assets/images/milestone_nodes.png'),
      echartHeight: 0,
      milestoneTextArr: [],
      options: { // 滑动插件配置选项
        currentPage: 0,
        slidesToScroll: 1, // 每次滑动项数
        direction: 'vertical'
      },
      rotate: 30 // 旋转角度
    }
  },
  computed: {
    rotateCss() {
      return `rotate(${this.rotate}deg)`
    }
  },
  mounted() {
    this.initMilestoneEchart()
    window.onresize = debounce(() => {
      if (this.echartInstance) {
        this.echartInstance.resize()
      }
    }, 500)
  },
  beforeDestroy() {
    window.onresize = null
    if (this.echartInstance) {
      this.echartInstance.dispose()
      this.echartInstance = null
    }
  },
  methods: {

    /**
     * 向上滚动文本
     */
    upChangeTxt() {
      this.rotate += 30
      this.$refs.slider.$emit('slidePre')
    },

    /**
     * 向下滚动文本
     * */
    downChangeTxt() {
      this.rotate -= 30
      this.$refs.slider.$emit('slideNext')
    },

    /**
     * 初始化图表
     */
    initMilestoneEchart() {
      var option = {
        series: [{
          center: ['40%', '40%'],
          type: 'liquidFill',
          data: [{ value: '0.6', itemStyle: {
            color: 'rgba(53,128,128,1)'
          }}],
          radius: '50%',
          label: {
            fontSize: 24,
            color: '#fff',
            formatter: function(param) {
              return param.value + '%' + '\n' + '{a|工程进度}'
            },
            fontWeight: 'normal',
            align: 'center',
            rich: {
              a: {
                color: '#43D4CF',
                fontSize: 18,
                lineHeight: 30
              }
            }
          },
          outline: {
            show: false
          }
        }],
        backgroundStyle: {
          borderWidth: 2,
          borderColor: 'rgba(53,128,128,1)',
          color: '#fff'
        }
      }
      this.echartInstance = echarts.init(document.getElementById('milestone-echart-instance'))
      this.echartInstance.setOption(option)
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/mixin.scss';
  .milestone{
    margin-top:23px;
    padding:26px 37px;
    width:100%;
    height:292px;
    height:30% !important;
    background:linear-gradient(-180deg,rgba(99,245,245,0.11) 0%,rgba(50,123,123,0.11) 100%);
    display:flex;
    flex-direction:row;
    position:relative;
    &:before{
      content:'';
      position:absolute;
      left:0;
      top:0;
      width: 0;
      height: 0;
      border-top: 15px solid #161A25;
      border-right: 15px solid transparent;
    }
    &:after{
      content:'';
      position:absolute;
      right:0;
      bottom:0;
      width: 0;
      height: 0;
      border-bottom: 15px solid #161A25;
      border-left: 15px solid transparent;
    }
  }
  #left-corner{
    position:absolute;
    left:-2px;
    top:-2px;
    width:7.2%;
    height:auto;
  }
  #right-corner{
    position: absolute;
    right:-2px;
    bottom:0;
    width:7.2%;
    height:auto;
    transform:rotate(180deg);
  }
  .trapezoid-title{
    position:absolute;
    left:41.25%;
    top:0;
    width:17.5%;
    height:46px;
    text-align: center;
    line-height:46px;
    font-weight:bold;
    @include fontSizeRem(18);
    color:rgba(67,212,207,1);
    background:rgba(53,128,128,1);
    z-index:1000;
    white-space:nowrap;
    @include trapezoid(46px,26px,30deg);
    font-size:18px;
}
.milestone-nodes-pointer{
  width:300px;
  position:relative;
  img{
    display:block;
    width:100%;
    height:auto;
  }
  #milestone-echart-instance{
    position:absolute;
    left:0;
    top:0;
    width:300px;
    height:300px;
  }
  .milestone-pointer{
    transition:transform 500ms ease-in;
    transform-origin: 40% 50%;
  }
}
.milestone-text{
    margin-bottom:2%;
    padding-bottom:6px;
    box-sizing:content-box;
    height:30px;
    width:50%;
    color:#fff;
    line-height:15px;
    @include fontSizeRem(14);
    align-self:flex-end;
    ::v-deep .slider-pagination{
      display:none;
    }
    ::v-deep .slider-item{
      @include fontSizeRem(14);
      line-height:15px;
      justify-content: flex-start;
      white-space:normal;
      text-align:left;
      overflow:hidden;
      align-items:flex-start;
    }
  }
  .swiper-btns{
    margin-left:3%;
    width:7.4%;
    display:flex;
    flex-direction: column;
    @include fontSizeRem(50);
    color:#327B7B;
    align-self:flex-end;
    .svgClass{
      cursor:pointer;
      width:changePxToRem(43) !important;
      height:changePxToRem(22) !important;
      fill:#327B7B !important;
      margin-top:31px;
    }
  }
  @media screen and (max-height: 937px){
     .milestone{
        margin-top:21px;
        padding:26px 33px;
        height:240px;
      }
    .milestone-nodes-pointer{
      width:243px;
      #milestone-echart-instance{
        width:243px;
        height:243px;
      }
    }
    .milestone-text{
      right:16.5%;
      bottom:21.4%;
      border-bottom:2px solid rgba(99,245,245,1);
      color:#fff;
      line-height:19px;
      @include fontSizeRem(14)
    }
  }
  @media screen and (max-height:768px){
    .milestone{
      margin-top:15px;
      height:160px;
      padding:17px 22px;
    }
    .milestone-nodes-pointer{
      width:162px;
      #milestone-echart-instance{
        width:162px;
        height:162px;
      }
    }
    .trapezoid-title{
      height:30px;
      line-height:30px;
      @include trapezoid(30px,17px,30deg);
    }
  }
</style>
